<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/comoon.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1837825_37s9zfngg35.css"/>
		<script src="js/index.js" defer></script>
	</head>
	<body>
		<div class="container">
			<!-- 头部 -->
			<header>
				<div class="logo">
					<a href="index.html">
						<img src="img/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul>
						<li class="active">
							<a href="index.html">
								<h3>首页</h3>
								<span>home</span>
							</a>
						</li>
						<li>
							<a href="gameList.html">
								<h3>游戏列表</h3>
								<span>game</span>
							</a>
						</li>
						<li>
							<a href="caseList.html">
								<h3>案例列表</h3>
								<span>Case</span>
							</a>
						</li>
						<li>
							<a href="gamePage.html">
								<h3>游戏内页</h3>
								<span>About us</span>
							</a>
						</li>
						<li>
							<a href="mine.html">
								<h3>个人中心</h3>
								<span>About us</span>
							</a>
						</li>
					</ul>
					<div class="weixin">
						<img src="img/weixin.png" alt="">
					</div>
				</nav>
			</header>
			<!-- 轮播 -->
			<div class="swiper">
				<section>
					<div class="swp_left">
						<div class="shouzhi">
							<img src="img/h_shouzhi.png" alt="">
						</div>
						<div class="h_icon">
							<img class="img_btn" src="img/h_icon_01.png" alt="">
							<img class="img_btn" src="img/h_icon_02.png" alt="">
							<img class="img_btn" src="img/h_icon_03.png" alt="">
							<img class="img_btn" src="img/h_icon_04.png" alt="">
						</div>
					</div>
					<div class="swp_content">
						<div class="phone_img">
							<img src="img/h_phone.png" >
						</div>
						<div class="swiper_img">
							<img id="img_swiper" src="img/h_swiper_01.png" >
						</div>
						<ol id="point">
							<li class="active"></li>
							<li></li>
							<li></li>
							<li></li>
						</ol>
					</div>
					<div class="swp_right">
						<div class="more">
							<h4>我们能给</h4>
							<h4>客户带来的利益</h4>
							<p>每一个细节的处理</p>
							<p>都体现出我们对时尚的不懈追求</p>
							<button type="button">了解更多</button>
						</div>
						<div class="h_icon">
							<img class="img_btn" src="img/h_icon_05.png" alt="">
							<img class="img_btn" src="img/h_icon_06.png" alt="">
							<img class="img_btn" src="img/h_icon_07.png" alt="">
							<img class="img_btn" src="img/h_icon_08.png" alt="">
						</div>
					</div>
				</section>
			</div>
			<!-- 内容 -->
			<div class="main">
				<img src="img/guaiwu.png" alt="">
				<img src="img/photo.png" alt="">
				<div class="main_one">
					<ul>
						<li>
							<img src="img/icon1.png" alt="">
							<div>
								<h4>STEP ONE</h4>
								<p>选择一个游戏，换图</p>
							</div>
						</li>
						<li>
							<img src="img/icon2.png" alt="">
							<div>
								<h4>THE SECOND STEP</h4>
								<p>选择一个游戏，换图</p>
							</div>
						</li>
						<li>
							<img src="img/icon3.png" alt="">
							<div>
								<h4>THE THIRD STEP</h4>
								<p>选择一个游戏，换图</p>
							</div>
						</li>
					</ul>
				</div>
				<!-- 第二个 -->
				<div class="main_two">
					<div class="m_title">
						<div>
							<h4>狂转游戏</h4>
							<p><span>Turn</span> mad game</p>
						</div>
						<p>潮流趣味游戏，引发全民G点，疯狂转发。<br>还不马上购买，植入你要传播的产品？</p>
					</div>
					<ul class="m_body">
						<li>
							<div class="header">
								<div class="title">
									<h5>剑圣传奇</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_01.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="header">
								<div class="title">
									<h5>PLAGUE LNC</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_02.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="header">
								<div class="title">
									<h5>地狱边境</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_03.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 复用第二个 -->
				<div class="main_two">
					<div class="m_title">
						<div>
							<h4>抽奖游戏</h4>
							<p><span>Lottery</span> game</p>
						</div>
						<p>潮流趣味游戏，引发全民G点，疯狂转发。<br>还不马上购买，植入你要传播的产品？</p>
					</div>
					<ul class="m_body">
						<li>
							<div class="header">
								<div class="title">
									<h5>功夫西游</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_04.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="header">
								<div class="title">
									<h5>宝石迷阵</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_05.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="header">
								<div class="title">
									<h5>植物大战僵尸</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<p>
										<span>2014-07-09</span>
										<span>使用次数:20</span>
									</p>
									<i class="iconfont icon-caidan_wujiaoxingkong"></i>
								</div>
							</div>
							<div class="showImg">
								<img src="img/article_06.jpg" alt="">
								<div class="mask">
									<a href="#">
										点击查看详情>>
									</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 经典案例 -->
				<div class="main_two">
					<div class="m_title">
						<div>
							<h4>经典案例分享</h4>
							<p><span>Lottery</span> game</p>
						</div>
						<p>大家对胖糖的信赖，<br>来源于其产品与需求巧妙结合的经典营销效果</p>
					</div>
					<ul class="m_share">
						<li>
							<div class="share_left">
								<div class="l_top">
									<img src="./img/icon4.png" alt="">
								</div>
								<div class="l_conter">
									<p>24</p>
									<span>october</span>
								</div>
								<div class="l_bottom">
									<i class="iconfont icon-star"></i>
								</div>
							</div>
							<div class="share_center">
								<h5>南方航空</h5>
								<p>飞行挑战赛</p>
								<p>2014年5月14日--5月27日</p>
								<p>扫码关注微信参加飞行挑战赛并抽奖</p>
								<p>即有机会赢取丰厚奖品</p>
							</div>
							<div class="share_right">
								<img src="img/article_07.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="share_left">
								<div class="l_top">
									<img src="./img/icon4.png" alt="">
								</div>
								<div class="l_conter">
									<p>24</p>
									<span>october</span>
								</div>
								<div class="l_bottom">
									<i class="iconfont icon-star"></i>
								</div>
							</div>
							<div class="share_center">
								<h5>南方航空</h5>
								<p>飞行挑战赛</p>
								<p>2014年5月14日--5月27日</p>
								<p>扫码关注微信参加飞行挑战赛并抽奖</p>
								<p>即有机会赢取丰厚奖品</p>
							</div>
							<div class="share_right">
								<img src="img/article_07.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="share_left">
								<div class="l_top">
									<img src="./img/icon4.png" alt="">
								</div>
								<div class="l_conter">
									<p>24</p>
									<span>october</span>
								</div>
								<div class="l_bottom">
									<i class="iconfont icon-star"></i>
								</div>
							</div>
							<div class="share_center">
								<h5>南方航空</h5>
								<p>飞行挑战赛</p>
								<p>2014年5月14日--5月27日</p>
								<p>扫码关注微信参加飞行挑战赛并抽奖</p>
								<p>即有机会赢取丰厚奖品</p>
							</div>
							<div class="share_right">
								<img src="img/article_07.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="share_left">
								<div class="l_top">
									<img src="./img/icon4.png" alt="">
								</div>
								<div class="l_conter">
									<p>24</p>
									<span>october</span>
								</div>
								<div class="l_bottom">
									<i class="iconfont icon-star"></i>
								</div>
							</div>
							<div class="share_center">
								<h5>南方航空</h5>
								<p>飞行挑战赛</p>
								<p>2014年5月14日--5月27日</p>
								<p>扫码关注微信参加飞行挑战赛并抽奖</p>
								<p>即有机会赢取丰厚奖品</p>
							</div>
							<div class="share_right">
								<img src="img/article_07.jpg" alt="">
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<footer>
				<img src="img/footer.png" alt="">
				<p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
			</footer>
		</div>
	</body>
</html>
